<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1822超市</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            padding: 0;
            margin: 0;
            height: 100vh;
        }

        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            max-width: 800px;
            padding: 40px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            background-color: #ffffff;
        }

        .image-container {
            flex: 1;
            text-align: center;
        }

        .image-container img {
            width: 100%;
            /* 设置图片宽度为父容器的100% */
            max-width: 250px;
            /* 设置最大宽度为250px */
            margin-bottom: 20px;
        }

        .form-container {
            flex: 1;
            padding: 40px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .el-input {
            margin-bottom: 20px;
            width: 20rem;
        }

        .el-button {
            width: 100%;
            margin-top: 10px;
        }

        .link-btn {
            text-align: center;
            display: block;
            margin-top: 10px;
            color: #409eff;
            text-decoration: none;
        }

        .link-btn:hover {
            text-decoration: underline;
        }

        .el-form-item {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 左侧Logo图片 -->
            <div class="image-container">
                <img src="img/supermarket.png" alt="超市Logo">
            </div>

            <!-- 右侧登录表单 -->
            <div class="form-container">
                <h2>登录</h2>
                <el-form :model="loginForm">
                    <el-form-item label="用户名" label-width="80px">
                        <el-input v-model="loginForm.username" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" label-width="80px">
                        <el-input v-model="loginForm.password" type="password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onLoginFormSubmit">登录</el-button>
                        <el-button onclick="javascript:window.location.href='register.html'" link>没有账号？点击注册。</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <script>
        // 初始化 Vue 3。
        const { createApp, reactive } = Vue

        const app = createApp({
            setup() {
                // 定义表单的数据。
                const loginForm = reactive({
                    username: "",
                    password: ""
                })

                // 定义表单的提交逻辑。
                const onLoginFormSubmit = () => {
                    if (loginForm.username.trim() === "") {
                        app.config.globalProperties.$message({
                            message: "用户名不能为空。",
                            type: "error",
                        })
                    }
                    else if (loginForm.password.length === 0) {
                        app.config.globalProperties.$message({
                            message: "密码不能为空。",
                            type: "error",
                        })
                    }
                    else {
                        const params = {
                            username: loginForm.username,
                            password: loginForm.password,
                        }
                        $.get("http://localhost:8080/admin/login", params, (res) => {
                            if (res.code === 200) {
                                app.config.globalProperties.$message({
                                    message: "登录成功。",
                                    type: "success",
                                })
                                localStorage.setItem("userData", JSON.stringify(res.data));

                                // 跳转到下一个页面
                                window.location.href = "admin.html";
                            }
                            else {
                                app.config.globalProperties.$message({
                                    message: res.msg,
                                    type: "error",
                                })
                            }
                        }, "json")
                    }
                }

                return {
                    loginForm,
                    onLoginFormSubmit,
                }
            }
        })
        app.use(ElementPlus)
        app.mount('#app')
    </script>

</body>

</html>